<template>
	<div class="session-info-container">
		<div v-if="isProcessAi" class="session-info-wrapper">
			<p v-if="isEditing" class="button-wrapper">
				<span class="button" @click="onCancle">取消</span>
				<span class="default right" @click="onConfirm">确定</span>
			</p>
			<!-- 0: '进行中', 1: '待质检', 2: '未完成', 3: '待补录', 4: '质检通过', 5: '补录中'  -->
			<p v-if="!isEditing && [1, 2].includes(baseInfo.status)" class="button-wrapper">
				<span class="default" @click="onPass">质检通过</span>
				<span class="button right" @click="onFix">选择补录节点</span>
			</p>
			<p v-if="!isEditing && [3].includes(baseInfo.status)" class="button-wrapper">
				<span class="button right" @click="onFix">选择补录节点</span>
			</p>
			<h3>双录运行记录</h3>
			<p class="divider"></p>
			<div class="video-list-wrapper">
				<div :class="[isEditing ? 'video-item-wrapper' : 'video-item-wrapper no-editing']">
					<div v-for="(node, index) in sessionInfo" :key="node.id">
						<NodeItem :index="index + 1" :node="node" :isEditing="isEditing" @onCheck="onCheck" :checked="checked[index]" />
					</div>
				</div>
			</div>
			<MessageBox
				v-if="isShowMessageBox"
				:dialogVisible="isShowMessageBox"
				@close="
					() => {
						isShowMessageBox = false;
					}
				"
				@confirm="onReload"
			/>
		</div>
		<!-- 0: '进行中', 1: '待质检', 2: '未完成', 3: '待补录', 4: '质检通过', 5: '补录中'  -->
		<div v-else class="button-group" v-show="[1].includes(baseInfo.status)">
			<button class="pass" @click="onPass">质检通过</button>
			<button class="nopass" @click="onReject">质检不通过</button>
		</div>
	</div>
</template>

<script>
import NodeItem from './NodeItem.vue';
import MessageBox from './MessageBox.vue';
// import FixConfirmButton from './FixConfirmButton.vue';
import { updateBizrecordStatus, updateRerecordingNode, checkBizrecordStatus } from '@/api/api.js';
export default {
	components: { NodeItem, MessageBox },
	props: {
		sessionInfo: {
			type: Array,
			default: () => []
		},
		baseInfo: {
			type: Object,
			default: () => {}
		},
		isProcessAi: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isEditing: false,
			isShowMessageBox: false,
			checked: []
		};
	},
	watch: {
		sessionInfo(newValue) {
			if (newValue) {
				this.getChecks(newValue);
			}
		}
	},
	mounted() {
		this.getChecks(this.sessionInfo);
	},

	methods: {
		// 质检通过
		updateBizrecordStatus(status = 4) {
			updateBizrecordStatus(this.baseInfo.inspectionId, status)
				.then(res => {
					if (res.data && res.data.code === 200 && res.data.message) {
						//  0: '进行中', 1: '待质检', 2: '未完成', 3: '待补录', 4: '质检通过', 5: '补录中'
						if (status === 4) {
							this.$message.success('质检通过');
							this.$emit('pass');
						} else if (status === 3) {
							this.$message.success('质检不通过');
							this.$emit('reject');
						}
					} else {
						this.checkError(res.data, status === 4 ? '质检' : '补录标记');
					}
				})
				.catch(err => {
					this.checkError(err, status === 4 ? '质检' : '补录标记');
				});
		},
		// 更新补录节点
		updateRerecordingNode(ids) {
			const param = {
				ids: ids,
				bizrecordId: this.baseInfo.inspectionId,
				updatedAt: this.baseInfo.updatedAtOrigin
			};
			updateRerecordingNode(param)
				.then(res => {
					console.warn('updateRerecordingNode : ', res.data);
					if (res.data && res.data.code === 200 && res.data.message) {
						this.$message.success('补录标记成功');
						this.$emit('update');
					} else {
						this.checkError(res.data, '补录标记');
					}
				})
				.catch(err => {
					this.checkError(err, '补录标记');
				});
		},
		onPass() {
			this.updateBizrecordStatus(4); // 4: '质检通过'
		},
		onFix() {
			if (this.baseInfo.status === 5) {
				this.$message.warning('正在补录中，禁止进行补录标记');
				this.$emit('update');
				return;
			}
			// 检测当前状态
			checkBizrecordStatus(this.baseInfo.inspectionId)
				.then(res => {
					if (res.data && res.data.code === 200 && res.data.message) {
						const { status } = res.data.message;
						if (status === 5) {
							this.$message.warning('正在补录中，禁止进行补录标记');
							this.$emit('update');
						} else {
							this.isEditing = true;
						}
					} else {
						this.$message.warning('获取状态失败');
						this.$emit('update');
					}
				})
				.catch(err => {
					this.$message.warning('获取状态失败');
					this.$emit('update');
					console.warn('获取状态失败', err);
				});
		},
		onReload() {
			this.isShowMessageBox = false;
			this.$router.go(0);
		},
		onCancle() {
			this.getChecks(this.sessionInfo);
			this.isEditing = false;
		},
		onConfirm() {
			this.isEditing = false;
			let ids = [];
			const selected = this.checked.filter(item => item === true);
			// 必选节点
			if (selected && selected.length > 0) {
				this.sessionInfo.map((item, index) => {
					if (this.checked[index] || this.isEndNode(item.modId.split('_')[0])) {
						ids.push(item.id);
					}
				});
				this.updateRerecordingNode(ids);
			} else {
				// 清空节点选择
				this.updateRerecordingNode([]);
				// 更新状态至待检 1: '待质检'
				this.updateBizrecordStatus(1);
			}
		},
		onCheck(index) {
			this.checked[index] = !this.checked[index];
		},
		checkError(err, type = '补录操作') {
			if (!err || !err.code) {
				return;
			}
			if (err.code === '3000') {
				// 3000	qualityInspection is reRecording	正在录制
				this.$message.warning(`正在补录中，禁止进行${type}`);
			} else if (err.code === '3001') {
				// 3001	qualityInspection is not latest	不是最新质检记录
				this.isShowMessageBox = true;
			} else if (err.code === '3002') {
				// 3002	qualityInspection has finshed	质检已完成
				this.$message.warning(`质检已完成，禁止进行${type}`);
			} else if (err.code === '3003') {
				// 3003	qualityInspection not need reRecord	待质检状态 不需补录
				this.$message.warning(`待质检状态, 不需${type}`);
			} else if (err.code === '3004') {
				// 3004	qualityInspection not exist	质检记录不存在
				this.$message.warning('质检记录不存在');
			} else {
				console.warn(`${type}失败`, err);
				this.$message.warning(`${type}失败`);
			}
		},
		isEndNode(modId) {
			// 结束节点、转人工节点、场景转接节点、变量判断节点不可进行勾选（选择补录节点时不展示复选框）
			const nodes = ['variableJudge', 'hangup', 'transfer', 'sceneTransfer'];
			return nodes.includes(modId);
		},
		getChecks(sessionInfo) {
			this.checked = [];
			sessionInfo.map(item => {
				if (!this.isEndNode(item.modId.split('_')[0])) {
					this.checked.push(item.needRerecord);
				}
			});
		},
		// 质检不通过
		onReject() {
			this.updateBizrecordStatus(3); // 3: '待补录'
		}
	}
};
</script>

<style lang="less" scoped>
.session-info-container {
	color: #333333;
	margin-top: 20px;
	height: 100%;
	h3 {
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		line-height: 24px;
	}

	.divider {
		width: 100%;
		height: 1px;
		background: #dedede;
		margin: 10px 0 20px 0;
	}

	.video-list-wrapper {
		display: flex;
		padding-left: 6px;

		.video-item-wrapper {
			display: block;

			width: 100%;
			padding-left: 20px;
		}
		.no-editing {
			border-left: 2px solid #eef0f3;
		}
	}
	.button-wrapper {
		text-align: right;
		position: fixed;
		right: 40px;
		bottom: 70px;

		span {
			display: inline-block;
			cursor: pointer;
			width: 94px;
			height: 34px;
			border-radius: 4px;
			text-align: center;
			line-height: 34px;
			margin-left: 12px;
			font-size: 12px;
		}
		.button {
			background: #ffffff;
			border: 1px solid #d1d8dc;
			color: #333333;
		}

		.default {
			background: #6384fe;
			color: #ffffff;
		}
		.right {
			margin-right: 30px;
		}
	}

	.button-group {
		font-size: 12px;
		font-weight: 400;
		line-height: 34px;

		.pass {
			width: 94px;
			height: 34px;
			background: #6384fe;
			border-radius: 4px;
			color: #ffffff;
			border: none;
			cursor: pointer;
		}

		.nopass {
			width: 94px;
			height: 34px;
			background: #ffffff;
			border: 1px solid #ef5753;
			border-radius: 4px;
			color: #ef5753;
			margin-left: 12px;
			cursor: pointer;
		}
	}
}
</style>
